<!-- 认证弹窗 -->
<template>
  <uni-popup ref="refVerifyPop">
    <view class="verify-pop">
      <view class="verify-pop-title">提示</view>
      <view class="verify-pop-content">
        <uni-forms ref="refForm" v-model="formData" label-position="top" :rules="rules">
          <uni-forms-item label="姓名" name="name">
            <uni-easyinput v-model="formData.name"></uni-easyinput>
          </uni-forms-item>
          <uni-forms-item label="身份证号" name="idCard">
            <uni-easyinput v-model="formData.idCard"></uni-easyinput>
          </uni-forms-item>
        </uni-forms>
      </view>
      <view class="verify-pop-buttons">
        <button type="default" size="mini" @click="cancel">取消</button>
        <button type="primary" size="mini" @click="submit">提交</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
  export default {
    name: "verify-pop",
    data() {
      return {
        formData: {
          //姓名
          name: "",
          //身份证
          idCard: ""
        },
        rules: {
          name: {
            rules: [{
              required: true,
              errorMessage: '请输入姓名'
            }]
          }
        }
      };
    },
    methods: {
      open() {
        this.$refs.refVerifyPop.open();
      },
      cancel() {
        this.$refs.refVerifyPop.close();
      },
      submit() {
        try {
          if (this.formData.name == "") {
            throw new Error("请输入姓名");
          }
          if (this.formData.idCard == "") {
            throw new Error("请输入身份证号");
          }
          this.cancel();
          this.$emit("onSubmit", this.formData)
        } catch (e) {
          uni.showToast({
            title: e.message,
            icon: 'none'
          })
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .verify-pop {
    width: 600rpx;
    min-height: 200px;
    background-color: #FFFFFF;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;

    &-title {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 16px;
    }

    &-content {
      margin-bottom: 16px;
    }

    &-buttons {
      display: flex;
      flex-direction: row;
    }
  }
</style>